<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- meta name="viewport" content="width=device-width, initial-scale=1"-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Plantilla básica de Bootstrap</title>
 
    <!-- CSS de Bootstrap -->
    <link href="public/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="public/css/test.css" rel="stylesheet" media="screen">
 
    <!-- librerías opcionales que activan el soporte de HTML5 para IE8 -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  	<?php 
  		echo phpinfo();
  	?>
    <h1>container</h1>
 	<div class="container">
 		<div class="row show_grid">
		  <div class="col-md-9">
		    Level 1: .col-md-9
		    <div class="row show_grid">
		      <div class="col-md-6">
		        Level 2: .col-md-6
		      </div>
		      <div class="col-md-6">
		        Level 2: .col-md-6
		      </div>
		    </div>
		  </div>
		</div>
 	</div>
 	<h1>Container-fluid</h1>
 	<div class="container-fluid">
 		<div class="row show_grid">
		  <div class="col-md-6 col-md-push-3">1</div>
		  <div class="col-md-3 col-md-pull-6">2</div>
		  <div class="col-md-3 col-md-pull-3">3</div>
		</div>
 	</div>
 	
 	<h1>Movil</h1>
 	<div class="container">
 		<div class="row show_grid">
		  <div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
		  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
		</div>
		<div class="row show_grid">
		  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
		  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
		  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
		</div>
		 
		<!-- Las columnas ocupan siempre la mitad de la pantalla, tanto en un
		     móvil como en un ordenador de escritorio -->
		<div class="row show_grid">
		  <div class="col-xs-6">.col-xs-6</div>
		  <div class="col-xs-6">.col-xs-6</div>
		</div>
 	</div>
 
 	<h1>Movil y ordenadores</h1>
 	<div class="container">
	 	<div class="row show_grid">
		  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
		  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
		</div>
		 
		<div class="row show_grid">
		  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
		  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
		 
		  <!-- Código opcional para limpiar las columnas XS en caso de que el
		       contenido de todas las columnas no coincida en altura -->
		  <div class="clearfix visible-xs"></div>
		  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
		</div>
 	</div>
 	
 	<h1>DIFERENTES ALTURAS</h1>
 	<div class="container">
 		<div class="row  show_grid">
		  <div class="col-md-4">.col-md-4</div>
		  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
		</div>
		 
		<div class="row  show_grid">
		  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
		  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
		</div>
		 
		<div class="row  show_grid">
		  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
		</div>
 	</div>
    <!-- Librería jQuery requerida por los plugins de JavaScript -->
    <script src="http://code.jquery.com/jquery.js"></script>
 
    <!-- Todos los plugins JavaScript de Bootstrap (también puedes
         incluir archivos JavaScript individuales de los únicos
         plugins que utilices) -->
    <script src="public/bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>